<template>
  <div class="person">
    <div class="headimg"></div>
    <div class="wrap">
      <div class="tp">
        <div class="img">
          <img v-if="userdata.avatar" :src="userdata.avatar" alt="" />
          <img v-else src="../assets/imgs/logo.png" alt="" />
        </div>
        <p class="name">{{userdata.nickName}}</p>
      </div>
      <div class="btm">
        <div class="item">
          <p class="num">100</p>
          <p class="desc">作品数</p>
        </div>
        <div class="item">
          <p class="num">1000</p>
          <p class="desc">点赞数</p>
        </div>
      </div>
    </div>
    <div class="cells">
      <van-cell-group>
        <van-cell class="cell" is-link value="">
          <template #title>
            <van-icon size="15" name="star" color="#f0f" />
            <span class="custom-title">我收藏的</span>
          </template>
        </van-cell>
        <van-cell class="cell" is-link value="">
          <template #title>
            <van-icon size="15" name="like" color="#f00" />
            <span class="custom-title">我点赞的</span>
          </template>
        </van-cell>
        <van-cell class="cell" is-link value="">
          <template #title>
            <van-icon size="15" name="photo" color="#faf" />
            <span class="custom-title">我的作品</span>
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group style="margin-top: 10px">
        <!-- <van-cell class="cell" is-link value="">
          <template #title>
            <van-icon size="15" name="setting" color="#454155" />
            <span class="custom-title">设置</span>
          </template>
        </van-cell> -->
        <van-cell class="cell" is-link value="" @click="userLogout">
          <template #title>
            <van-icon size="15" name="clock" color="#454155" />
            <span class="custom-title">退出登录</span>
          </template>
        </van-cell>
        <van-cell class="cell" is-link value="">
          <template #title>
            <van-icon size="15" name="warning" color="#aaa" />
            <span class="custom-title">帮助</span>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>


<script>
import { defineComponent, onMounted, reactive } from "@vue/runtime-core";
import { Cell, CellGroup, Toast } from "vant";
import { ref } from "vue";
import { useRouter } from "vue-router";
import {logout,getInfo} from '../api/index'
import {Dialog} from 'vant'
export default defineComponent({
  name: "",
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  setup() {
    const router=useRouter();
    let userdata=reactive({});
    const userLogout=()=>{
      Dialog.confirm({
        title:'解绑提示',
        message:'确认退出并解除已绑定信息?'
      }).then(res=>{
        logout().then(res=>{
        if(res.retCode==200){
          Toast(res.data);
          setTimeout(function(){
            router.replace('/login');
          },1000)
        }
      })
      }).catch(err=>{
        Dialog.close();
      })
      
    }
    onMounted(()=>{
      getInfo().then(res=>{
        Object.assign(userdata,res.data);
      })
    })
    return {
      userLogout,
      userdata
    };
  },
});
</script>

<style lang="scss" scoped>
.person {
  width: 100%;
  height: 100vh;
  padding-bottom: 160px;
  background: #f1f1f1;
  overflow-x: hidden;
  .headimg {
    width: 100%;
    height: 300px;
    background: url("../assets/imgs/person_bg.png") no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .wrap {
    width: 100%;
    height: 200px;
    background: #fff;
    position: relative;
    z-index: 2;
    &:after {
      content: "";
      position: absolute;
      width: 115%;
      height: 300px;
      border-radius: 50%;
      top: -100px;
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      z-index: 1;
    }
    .tp {
      position: absolute;
      top: -180px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      .name {
        font-size: 18PX;
        color: #333;
        text-align: center;
        margin-top: 30px;
      }
    }
    .btm {
      width: 100%;
      height: 100px;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 2;
      border-top: 1px solid #f1f1f1;
      display: flex;
      justify-content: space-between;
      &::after {
        content: "";
        width: 1px;
        height: 60%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        background: #ccc;
      }
      .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        p {
          text-align: center;
          font-size: 14PX;
          color: #999;
        }
        .num {
          font-size: 16PX;
          color: #111;
        }
      }
    }
    .img {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      display: block;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      img {
        width: 100%;
      }
      &:before {
        content: "";
        background: transparent;
        width: 110%;
        height: 110%;
        border-radius: 50%;
        box-shadow: 0 0 2px 2px #bae2e8;
        position: absolute;
      }
      &:after {
        content: "";
        background: transparent;
        width: 120%;
        height: 120%;
        border-radius: 50%;
        box-shadow: 0 0 2px 2px #bae2e8;
        position: absolute;
      }
    }
  }
  .cells {
    margin-top: 20px;
  }
  .custom-title {
    margin-left: 10px;
  }
}
.cell {
  border-bottom: 1px solid #f1f1f1;
}
</style>